<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="8" style="height: 120px;padding-bottom: 10px;">
        <Card style="width:100%;height:100%">
          <div style="text-align:center">
              <h2><span style="margin-right:5px">Hi</span><span style="color:red">{{userName}}</span></h2>
              <h3>WelCome to OpsPlatform 管理平台</h3>
          </div>
        </Card>
      </i-col>
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie v-if="pieData" style="height: 300px;" :value="pieData" text="上线工单统计"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card>
          <p slot="title" style="text-align:center">公告栏</p>
          <p v-for="(item,index) in pushRcord" :key="index">用户{{item.push_user}}于{{item.push_time}}推送了{{item.application_type}}应用{{item.name}}到{{item.push_env}}环境</p>
        </Card>
      </i-col>
    </Row>
    <!-- <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row> -->
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { homeInfo } from '@/api/home'

export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      userName: '',
      inforCardData: [],
      pieData: null,
      pushRcord: []
    }
  },
  mounted () {
    homeInfo().then(res => {
      this.userName = res.data.userName
      this.pieData = [
        {value:res.data.prod_deploy_count,name:'生产环境'},
        {value:res.data.uat_deploy_count,name:'UAT环境'},
      ]
      this.inforCardData = [
        { title: '平台用户', icon: 'md-person-add', count: res.data.userCount, color: '#2d8cf0' },
        { title: '镜像仓库地址', icon: 'md-locate', count: res.data.repoCount, color: '#19be6b' },
        { title: '当月上线总计', icon: 'md-share', count: res.data.deployCount, color: '#E46CBB' },
        { title: '我提交的工单', icon: 'md-chatbubbles', count: res.data.work_order_count, color: '#9A66E4' },
      ],
      this.pushRcord = res.data.pushRecord
    })
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
